<template>
  <section>
    <ul>
      <li
        v-for="(group, index) in sharedContactState.favGroupList"
        :key="index"
        @click="showGroup(group)"
      >
        <div
          class="group-item flex flex-cc"
          v-bind:class="{
            active:
              sharedContactState.currentGroup &&
              sharedContactState.currentGroup.target === group.target,
          }"
        >
          <BaseImage class="kang-avatar" :src="group.portrait"></BaseImage>
          <span class="single-line ml-10">
            {{ group.remark ? group.remark : group.name }}
          </span>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
import store from '../../../store'

export default {
  name: 'GroupListView',
  props: {},
  data() {
    return {
      sharedContactState: store.state.contact,
    }
  },
  methods: {
    showGroup(group) {
      store.setCurrentGroup(group)
    },
  },
}
</script>

<style scoped>
.group-item {
  height: 68px;
  padding: 12px;
}
</style>
